<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="ico/favicon.ico">

    <title>Paperclip - Blog Post</title>

    <!-- Bootstrap core CSS -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Resources -->
    <link href="fonts/font-awesome-4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Navigation -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="..."></a>
        </div>
        <div class="collapse navbar-collapse">
          <button class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Sign In</button>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="blog-post.html#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="index.html">Home: Default</a></li>
                <li><a href="index-full.html">Home: Fullscreen</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="blog-post.html#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="about-us.html">About Us</a></li>
                <li><a href="coming-soon.html">Coming Soon</a></li>
                <li><a href="contact-us.html">Contact Us</a></li>
                <li><a href="help-center.html">Help Center</a></li>
                <li><a href="help-item.html">Help Item</a></li>
                <li><a href="pricing-table.html">Pricing Table</a></li>
                <li><a href="responsive-video.html">Responsive Video</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="sign-in.html">Sign In</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="error-page.html">404 Error Page</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="blog-post.html#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="portfolio-item.html">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="blog-post.html#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="blog.html">Blog</a></li>
                <li><a href="blog-post.html">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="blog-post.html#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="shop.html">Shop</a></li>
                <li><a href="shop-item.html">Shop Item</a></li>
                <li><a href="shopping-cart.html">Shopping Cart</a></li>
                <li><a href="user-profile.html">User Profile</a></li>
              </ul>
            </li>
            <li class="hidden-sm">
              <a href="ui-elements.html">UI Elements</a>
            </li>
            <!-- Navbar Search -->
            <li class="hidden-xs" id="navbar-search">
              <a href="blog-post.html#">
                <i class="fa fa-search"></i>
              </a>
              <div class="hidden" id="navbar-search-box">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                  </span>
                </div>
              </div>
            </li>
          </ul>
          <!-- Mobile Search -->
          <form class="navbar-form navbar-right visible-xs" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <span class="input-group-btn">
                <button class="btn btn-red" type="button">Search!</button>
              </span>
            </div>
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </div> <!-- / .navigation -->

    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>Blog Post</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="index.html">Home</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li class="active">Blog Post</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-sm-9">
            <!-- Blog Post #1 -->
            <div class="blog">
              <img src="img/photo-1.jpg" alt="...">
              <div class="blog-desc">
                <h3>
                  <a href="blog-post.html">Sed lacinia suscipit lacus non sodales. Pellentesque lacinia ornare justo eu tincidunt.</a>
                </h3>
                <hr>
                <p class="text-muted">by John Doe on March 25, 2014</p>
                <p>
                  Nam ultrices, orci sit amet dignissim dignissim, tellus elit consequat dui, eu venenatis urna nisi non est. Aliquam egestas pulvinar ornare. Aenean et vulputate lacus. Ut eget purus ut ante imperdiet feugiat quis vel elit. Donec imperdiet enim quis risus porttitor congue. Vestibulum vel tristique urna. Pellentesque nulla leo, laoreet sed luctus eu, dapibus id lorem. Pellentesque eu tincidunt odio. Proin imperdiet bibendum mauris, ut bibendum odio mollis id.
                </p>
                <img class="img-responsive" src="img/general-3.jpg" alt="...">
                <p>
                  Nulla fringilla lacinia tortor eget auctor. Morbi vulputate tincidunt justo, quis viverra arcu dapibus sit amet. Sed facilisis lectus non lacus tincidunt interdum. Pellentesque congue posuere urna quis condimentum. Maecenas non molestie leo. Quisque eget tortor tellus. Duis lacinia est vel blandit fermentum. Duis quis arcu mauris. Mauris et facilisis orci, sed pretium enim. In hac habitasse platea dictumst. Pellentesque eget tempor nisl, quis tempus ipsum. Nunc egestas neque ac velit lobortis pulvinar.
                  <br /><br />
                  Aliquam neque metus, ornare eget tincidunt a, hendrerit ultricies nunc. Duis ornare semper eleifend. Suspendisse tellus justo, tristique vel eros ut, lacinia gravida arcu. Etiam erat ligula, mattis pellentesque velit id, facilisis ultricies sapien. Donec ultrices sodales velit ut placerat. Fusce id mi mattis est bibendum iaculis sit amet vitae lectus. Quisque tempus fringilla neque et accumsan. Etiam at metus laoreet, suscipit justo faucibus, lacinia massa. Pellentesque felis nibh, interdum id mi vel, ultrices fermentum quam.
                </p>
              </div>
            </div>

            <!-- Pagination -->
            <ul class="pager pull-right">
              <li><a href="blog-post.html#">Previous</a></li>
              <li><a href="blog-post.html#">Next</a></li>
            </ul>
            <div class="clearfix"></div>
            
            <div class="comments">
            <!-- New comment form -->
              <div class="cmt well">
                <img src="img/photo-1.jpg" alt="...">
                <div class="cmt-block">
                  <strong>Alex Smith</strong>
                  <form role="form" class="cmt-body">
                    <div class="form-group">
                      <textarea class="form-control" rows="3" placeholder="Enter your comment here"></textarea>
                    </div>
                    <button type="submit" class="btn btn-red btn-sm">Submit</button>
                  </form>
                </div>
              </div>
              <!-- List of comments -->
              <h4 class="text-right">3 comments</h4>
              <hr>
              <div class="cmt">
                <img src="img/photo-2.jpg" alt="...">
                <div class="cmt-block">
                  <a href="user-profile.html" class="profile-link">John Doe</a> <span class="text-muted time">20 minutes ago</span>
                  <span class="rating pull-right">
                    <span class="up">0</span>
                    <i class="fa fa-thumbs-up voteup"></i>  <i class="fa fa-thumbs-down votedown"></i>
                    <span class="down">0</span>
                  </span>
                  <p class="cmt-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis nibh nibh, a aliquam leo suscipit ac. Praesent ultricies nibh quis nisi placerat tristique non lobortis diam!
                  </p>
                  <ul class="list-inline">
                    <li><a href="blog-post.html#">Answer</a></li>
                  </ul>
                </div>
              </div>
              <div class="cmt">
                <img src="img/photo-3.jpg" alt="...">
                <div class="cmt-block">
                  <a href="user-profile.html" class="profile-link">John Doe</a> <span class="text-muted time">1 hour ago</span>
                  <span class="rating pull-right">
                    <span class="up">0</span>
                    <i class="fa fa-thumbs-up voteup"></i>  <i class="fa fa-thumbs-down votedown"></i>
                    <span class="down">0</span>
                  </span>
                  <p class="cmt-body">
                    Praesent ultricies nibh quis nisi placerat tristique non lobortis diam. Quisque ac quam ut magna malesuada imperdiet ut a odio. Aliquam erat volutpat. Nullam non elit orci.
                  </p>
                  <ul class="list-inline">
                    <li><a href="blog-post.html#">Answer</a></li>
                  </ul>
                </div>
              </div>
              <div class="cmt">
                <img src="img/photo-1.jpg" alt="...">
                <div class="cmt-block">
                  <a href="user-profile.html" class="profile-link">John Doe</a> <span class="text-muted time">08/01/2014</span>
                  <span class="rating pull-right">
                    <span class="up">0</span>
                    <i class="fa fa-thumbs-up voteup"></i>  <i class="fa fa-thumbs-down votedown"></i>
                    <span class="down">0</span>
                  </span>
                  <p class="cmt-body">
                    Duis vitae mollis massa. Nunc eleifend velit sit amet lorem commodo, a faucibus metus imperdiet. Maecenas vitae pellentesque lacus. Duis cursus lacus non porta eleifend. Nunc elementum, metus vitae ornare euismod, nulla felis pulvinar nunc, condimentum bibendum lacus elit in neque. Nunc hendrerit sit amet ipsum in elementum. Maecenas vel libero varius, convallis dui vel, ultricies urna.
                  </p>
                  <ul class="list-inline">
                    <li><a href="blog-post.html#">Answer</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <!-- Search -->
            <form role="form">
              <div class="well">
                <div class="row">
                  <div class="col-sm-12">
                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="Search here...">
                      <span class="input-group-btn">
                        <button class="btn btn-red" type="button"><i class="fa fa-search"></i></button>
                      </span>
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
              </div>
            </form>
            <!-- Categories -->
            <div class="panel panel-default">
              <div class="panel-heading">
                Categories
              </div>
              <div class="panel-body">
                <ul>
                  <li><a href="blog-post.html#">Databases (12)</a></li>
                  <li><a href="blog-post.html#">Design (25)</a></li>
                  <li><a href="blog-post.html#">Hardware (17)</a></li>
                  <li><a href="blog-post.html#">Management (15)</a></li>
                  <li><a href="blog-post.html#">Security (8)</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div> <!-- / .row -->
      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <!-- Contact Us -->
          <div class="col-sm-4">
            <h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
            <p>Do not hesitate to contact us if you have any questions or feature requests:</p>
            <p>
              San Francisco, CA 94101<br />
              1987 Lincoln Street<br />
              Phone: +0 000 000 00 00<br />
              Fax: +0 000 000 00 00<br />
              Email: <a href="blog-post.html#">admin@mysite.com</a>
            </p>
          </div>
          <!-- Recent Tweets -->
          <div class="col-sm-4">
            <h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
            <div class="tweet">
              <i class="fa fa-twitter fa-2x"></i>
              <p>
                Ut tincidunt erat quis viverra consectetur. Suspendisse tempus vulputate leo.
                <a href="blog-post.html#">1 day ago</a>
              </p>
            </div>
            <div class="tweet">
              <i class="fa fa-twitter fa-2x"></i>
              <p>
                Mauris eget lacus ut ipsum dignissim malesuada quis nec ante.
                <a href="blog-post.html#">2 days ago</a>
              </p>
            </div>
          </div>
          <!-- Newsletter -->
          <div class="col-sm-4">
            <h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
            <p>
              Enter your e-mail below to subscribe to our free newsletter.
              <br>
              We promise not to bother you often!
            </p>
            <form class="form" role="form">
              <div class="row">
                <div class="col-sm-8">
                  <div class="input-group">
                    <label class="sr-only" for="subscribe-email">Email address</label>
                    <input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">
                    <span class="input-group-btn">
                      <button type="submit" class="btn btn-default">OK</button>
                    </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </footer>

    <!-- Copyright -->
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="copyright">
            Copyright 2014 - Paperclip Theme by <a href="https://twitter.com/YevSim">Yevgeny S.</a> | All Rights Reserved
          </div>
        </div>
      </div>  <!-- / .row -->
    </div> <!-- / .container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <script src="js/custom.js"></script>
  </body>
</html>